<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>

  <body>
    <canvas id="live2d" class="live2d"></canvas>
    <canvas id="live2d2" style="position: fixed;bottom:0;right:0;" class="live2d"></canvas>
    <button
      type="button"
      onclick="waifu.startRandomMotion('shake', 2)"
      name="button"
    >
      shake
    </button>
    <script src="../lib/live2d.min.js"></script>
    <script src="../lib/Live2DFramework.js"></script>
    <script src="../lib/utils/MatrixStack.js"></script>
    <script src="../lib/utils/ModelSettingJson.js"></script>
    <script src="../lib/PlatformManager.js"></script>
    <script src="../lib/LAppModel.js"></script>
    <script src="../lib/index.js"></script>
    <script type="text/javascript">
      // loadLive2d('live2d','model/hakasen')
      let model = function(name){
        let closet = ['closet.2018.spring','closet.2018.lover'][parseInt(Math.random()*2)]
        return {
          "model": `${name}.v2.moc`,
          "textures": [
            "texture/texture_00.png",
            `texture/${closet}/texture_01.png`,
            `texture/${closet}/texture_02.png`,
            `texture/${closet}/texture_03.png`
          ],
          "hit_areas_custom": {
            "head_x": [-0.35, 0.6],
            "head_y": [0.19, -0.2],
            "body_x": [-0.3, -0.25],
            "body_y": [0.3, -0.9],
            "binding": {
              "head": ["thanking"],
              "body": "tap_body"
            }
          },
          "layout": {
            "center_x": -0.1,
            "center_y": 0,
            "width": 2.4,
            "height": 2.0
          },
          "motions": {
            "idle": [{
              "file": `motions/${name}.v2.idle-01.mtn`,
              "fade_in": 2000,
              "fade_out": 2000
            }, {
              "file": `motions/${name}.v2.idle-02.mtn`,
              "fade_in": 2000,
              "fade_out": 2000
            }, {
              "file": `motions/${name}.v2.idle-03.mtn`,
              "fade_in": 1000,
              "fade_out": 1000
            }],
            "tap_body": [{
              "file": `motions/${name}.v2.touch.mtn`,
              "fade_in": 150,
              "fade_out": 100,
              "sound": [
                `sound/${name}-1.wav`,
                `sound/${name}-2.wav`,
                `sound/${name}-3.wav`,
                `sound/${name}-4.wav`,
                `sound/${name}-5.wav`,
                `sound/${name}-6.wav`,
                `sound/${name}-7.wav`,
                `sound/${name}-8.wav`,
                `sound/${name}-9.wav`,
                `sound/${name}-10.wav`,
                `sound/${name}-drag.wav`
              ]
            }],
            "thanking": [{
              "file": `motions/${name}.v2.thanking.mtn`,
              "fade_in": 2000,
              "fade_out": 2000
            }]
          }
        }
      }
      window.model22 = function(){
        return {
          canvas: "live2d",
          baseUrl: "./model/22",
          model: model('22'),
          interval: 5000, // 自动motion的开始时间点到下一个motion的开始点之间的间隔
          idle: "idle", // 自动触发的motion
          width: "400", // html上的width属性优先级更高
          height: "400", // html上的height属性优先级更高
          debug: {
            DEBUG_LOG: true,
            DEBUG_MOUSE_LOG: false
          },
          binding: {
            head: {
              motion: ["tap_body","shake"],
              callback: function(options) {
                // console.log(hitArea);
                // console.log(motionName);
                // console.log(name)
                console.log("hint head callback: hentai",options);
                // return false
              }
            }
          },
          initModelCallback(waifu){
            window.waifu = waifu
            console.log('22 loaded')
            window.waifu2 = loadLive2d(model33());
          }
        };
      }
      window.model33 = function(){
        return {
          canvas: "live2d2",
          baseUrl: "./model/33",
          model: model('33'),
          interval: 5000, // 自动motion的开始时间点到下一个motion的开始点之间的间隔
          idle: "idle", // 自动触发的motion
          width: "400", // html上的width属性优先级更高
          height: "400", // html上的height属性优先级更高
          debug: {
            DEBUG_LOG: true,
            DEBUG_MOUSE_LOG: false
          },
          binding: {
            head: {
              motion: ["tap_body","shake"],
              callback: function(options) {
                // console.log(hitArea);
                // console.log(motionName);
                // console.log(name)
                console.log("hint head callback: hentai",options);
                // return false
              }
            }
          },
          initModelCallback(waifu){
            window.waifu2 = waifu
            console.log('33 loaded')
          }
        };
      }
      var kaguya = {
        canvas: document.getElementById("live2d2"),
        baseUrl: "./model/kaguya/",
        allowSound: true,
        interval: 15000, // 自动motion的开始时间点到下一个motion的开始点之间的间隔
        idle: "idle", // 自动触发的motion
        width: "400", // html上的width属性优先级更高
        height: "400", // html上的height属性优先级更高
        globalFollowPointer: true, // 全局跟随鼠标 def:false
        scaling: true, // 允许滚轮放大缩小 def:false
        debug: {
          DEBUG_LOG: true,
          DEBUG_MOUSE_LOG: false
        },
        layout: {
          // 布局设置 这个优先级最高，然后到model.json(字段正确的话)，再到默认
          width: "",
          height: "",
          x: "",
          y: "",
          center_x: "",
          center_y: "",
          top: "",
          bottom: "",
          left: "",
          right: ""
        },
        view: {
          VIEW_MAX_SCALE: 2, // 最大缩放比例
          VIEW_MIN_SCALE: 0.8, // 最小缩放比例
          VIEW_LOGICAL_LEFT: -1,
          VIEW_LOGICAL_RIGHT: 1,
          VIEW_LOGICAL_MAX_LEFT: -2,
          VIEW_LOGICAL_MAX_RIGHT: 2,
          VIEW_LOGICAL_MAX_BOTTOM: -2,
          VIEW_LOGICAL_MAX_TOP: 2
        },
        binding: {
          head: {
            motion: ["flick_head", "shake"],
            callback: function({
              hitArea, // 点击区域
              motionPath,// 即将播放的motion地址
              motionName,// 即将播放的motion名称
              priority// 优先级
            }) {
              console.log(motionName);
              if(motionName === 'shake'){
                return false
              }else{
                return true
              }

            }
          },
          face: "tap_face",
          breast: ["tap_breast", "shake"],
          belly: "tap_belly",
          leg: function(){
            console.log('hentai!')
          }
        },
        autoLoadAudio: function() {
          console.log("音频加载完毕");
        },
        initModelCallback(waifu) {
          console.log(waifu);
          console.log("模型加载完毕");
          // window.waifu = loadLive2d(model22());
          // waifu.startRandomMotion('shake',2)
        }
      };
      window.waifu = loadLive2d(kaguya);

    </script>
  </body>
</html>
